<template>
  <div id="" class="container">
    <div class="leftNaV">
      <ul>
        <li :class="{'active': index === leftNavIndex}" class="" v-for="(item,index) in leftNavData" :key="index" @click="goToRouter(index)">
          {{item.title}}
        </li>
      </ul>
      <Corner></Corner>
    </div>
    <div class="rightContent">
      <router-view/>
    </div>
  </div>
</template>

<script>
import Corner from '../../../../components/corner'

export default {
  name: 'classify',
  components: {
    Corner
  },
  data () {
    return {
      leftNavData: [
        {'title': '调查类型', 'name': 'template'},
        {'title': '属性分组', 'name': 'templateGroup'},
        {'title': '属性字段', 'name': 'templateItem'}
      ],
      leftNavIndex: 0
    }
  },
  methods: {
    goToRouter (index) {
      this.leftNavIndex = index
      switch (index) {
        case 0:
          this.$router.push('/resource/classify/template')
          break
        case 1:
          this.$router.push('/resource/classify/templateGroup')
          break
        case 2:
          this.$router.push('/resource/classify/templateItem')
          break
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .container{
    height: 100vh;
    display: flex;
    box-sizing: border-box;
  }
  .leftNaV{
    box-sizing: border-box;
    color: #FFFFFF;
    /*font-size: 2rem;*/
    width: 13%;
    min-width: 240px;
    background: rgba(24, 32, 45, 0.2);
    /*background-color: red;*/
    height: calc(100vh - 190px);
    max-height: calc(100vh - 190px);
    display: flex;
    justify-content: center;
    border:1px solid rgba(0,245,255,0.5);
    position: relative;
    /*align-items: center;*/
    ul{
      margin-top: 9%;
      width: 80%;
    }
    li{
      cursor: pointer;
      font-size: 2rem;
      text-align: left;
      padding: 15px 15%;
      margin-bottom: 15px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      &.active{
        box-shadow: inset 0 0 15px rgba(0,245,255,1);
      }
      img{
        margin-right: 10px;
      }
    }
  }
  .rightContent{
    font-size: 2.2rem;
    margin-left: 2%;
    width: 100%;
    height: calc(100vh - 250px);
    /*background-color: red;*/
  }
</style>
